编写一个基于JQuery的自定义导航小框架

哈喽，亲爱的慕课网小伙伴们，好久不见，今天给大家带来一篇内容：主要讲述如何用jquery造一个“框架”，这个框架可以实现导航条的生成。

效果图及框架代码调用

//body代码
<div id="fhwdaohang1">
</div>
<div id="fhwdaohang2">
</div>
<div id="fhwdaohang3">
</div>

html部分，需要预先定义出装导航条的容器，这里定义3个容器

//脚本引入
<script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="js/lib/jquery-2.2.4.min.js"></script>
<script class="lazyload" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsQAAA7EAZUrDhsAAAANSURBVBhXYzh8+PB/AAffA0nNPuCLAAAAAElFTkSuQmCC" data-original="js/lib/jquery.fhwdaohang.js"></script>

引入jquery库，和我们已经写好的框架库  jquery.fhwdaohang.js

//JS代码
/*调用框架函数，传入一个data，data格式是一个对象或哈希表或JSON数据*/
    $.fhwdaohang({
        boxid:'#fhwdaohang1',//必须传入，导航的包裹容器id；
        length:5,//导航条的数量，默认是1；
        btncss:{'margin-left':2},//导航按钮的CSS样式，一个对象，可不传入，有默认属性；
        type:'left',//导航是横向还是竖向，默认竖向；
        href:['a.html','b.html','c.html','d.html','e.html'],//导航条的链接数据，一个数组，默认指向‘#’
        active:3,//激活第几个导航，默认不激活
        pos:{position:'absolute',left:10,top:10},//导航容器的CSS定位，默认无样式
    });

    $.fhwdaohang({
        boxid:'#fhwdaohang2',
        length:3,
        btncss:{'margin-left':10,'background-color':'#0f0'},
        activecss:{'background-color':'#00f'},
        type:'left',
        href:['a.html','b.html','c.html','d.html','e.html'],
        aname:['a','b','c','d','e'],
        active:2,
        pos:{position:'absolute',left:10,top:50},
    });

    $.fhwdaohang({
        boxid:'#fhwdaohang3',
        length:5,
        btncss:{'border':'1px solid #fff','border-radius':0,width:100,height:40,'background-color':'#111',color:'#fff'},
        href:['a.html','b.html','c.html','d.html','e.html'],
        active:4,
        pos:{position:'absolute',left:100,top:100},
    });

调用框架函数，写好数据，即可生成导航栏。

主要知识点的应用
DOM节点的制作
制作一个ul节点可以采用：

var $ul=$('<ul></ul>')

$ul此时就是一个DOM节点，可以用操作DOM的方法去操作它了，比如$ul.html()可以给该节点加入html内容，$ul.attr()可以操作节点的属性等等等；

一个对象内部属性的访问方法
我们定义一个对象 var obj={'sx-name':'fhw',age:18,job:'wuyeyoumin'},
注意，对象对应用花括号括起来，每一组属性用逗号分割，
每一组属性包括一个属性名和一个属性值，
属性名如有’-‘，需把属性名用引号包裹，
属性值如果是字符串，需用引号包裹。
访问属性:有’-‘的属性名用这种方式访问 obj['sx-name']='fhw'；
其它可直接用 obj.age=18;obj.job='wuyeyoumin'

判断一个变量是否被定义
这里有一个变量data，未定义，如果我们用
data=='undefined'，就会报错，data未定义，程序会停止执行。
这里我们用typeof data=='undefined'，就可以正确的判断data是不是被定义了。

$.extend 合并对象
var obj1={name:'fhw',age:18},obj2={name:'mmz',job:'wuyeyouming'}
$.extent(obj1,obj2);
执行结果 obj1={name:'mmz',age:18,job:'wuyeyouming'}
相同属性名，后者值会覆盖前者，不同属性名会加入到前者对象中。。。
合并的结果保存在第一个对象中。

parseInt()，将变量整形化
parseInt(2.345)=2;
parseInt('abcd')=NaN;

框架制作

var $ul=$('<ul></ul>'),
        $li=$('<li></li>'),
        $a=$('<a></a>');//制作导航需要的3个节点
    var $model=[];
    var $href=[],$aname=[];
    var $btncss={},$hovercss={},$activecss={};//初始化一些属性值，下面要用到的
    $btncss={display:'block','width':'100px','height':'30px','font-size':'16px',
        'font-weight':'bold','color':'#000','background-color':'#0FF','text-align':'center',
        'text-decoration':'none','border-radius':'5px'};//导航按钮的默认样式
    $hovercss={'background-color':'#009','color':'#fff'};//鼠标划过导航按钮的默认样式
    $activecss={'background-color':'#C03'};//导航按钮被激活的默认样式
    var $box=$(data.boxid);//获取导航条的包裹容器

以上是初始变量的定义

if('undefined'==typeof data){//如果用户未传入任何数据
        var data={};//定义data变量为空对象
    }
    if(data.btncss){//如果用户传入了按钮的新样式
        $.extend($btncss,data.btncss);//将初始样式与新样式合并 
    }
    if(data.hovercss){//如果用户传入了按钮的hover样式
        $.extend($hovercss,data.hovercss);//将初始样式与新样式合并
    }
    if(data.activecss){//如果用户传入了按钮的激活样式
        $.extend($activecss,data.activecss);    //合并
    }
    for(var i=0,length=parseInt(data.length)1;i<length;i++){//定义导航的按钮数length，如果用户未传入这个参数，则默认为1；遍历长度
        if(data.href&&data.href[i]){//如果用户传入了链接地址属性
            $href.push(data.href[i]);//将链接地址传入$href数组中
        }
        else{//如果用户为传入链接地址
            $href.push('#');//传入一个默认的’#‘
        }
        if(data.aname&&data.aname[i]){//如果用户传入了导航按钮的文字
            $aname.push(data.aname[i]);//将其传入数组$aname中
        }
        else{//否则，传入'导航x'
            $aname.push('导航'+i);
        }
    }

上面这段代码，是用来处理用户传入的数据。

for(var i=0,length=parseInt(data.length)1;i<length;i++){//遍历长度
        var $_li=$li.attr('id','fhwli-'+i);//创建一个临时的li节点，并加一个id值
        var $_a=$a.html($aname[i]).attr('href',$href[i]);   //创建一个临时的a节点，添加’href‘属性和html内容；
        $_li.append($_a);//将临时a节点添加到临时li节点中
        $ul.append($_li);//将临时节点li添加到ul中
        $model.push($ul.html());//将ul的html内容添加到数组$model中
    }
    $ul.html($model.join(''));//将model中的html数组，分割成字符串，传入$ul这个节点中
    $box.append($ul);//将整个ul添加到$box导航容器中

上面这段代码，将生成导航按钮

$box.find('ul').css({'margin':0,'padding':0});//初始化ul边距
    if(data.target){//设置链接打开方式
        $box.find('a').attr('target',data.target);
    }
    if(data.pos){//设置导航容器相对位置
        $box.css(data.pos); 
    }
    if(data.type=='left'){//设置导航是横向还是纵向，默认纵向
        $box.find('li').css('float','left');
    }
    $box.find('li').css({'overflow':'hidden','list-style':'none'});
    $box.find('a').css($btncss);//如果用户传入链接的打开方式，设置按钮样式
    $box.find('a').css({'line-height':$box.find('a').height()+'px'});//垂直居中文字
    $box.find('a').on('mouseenter',function(){//设置按钮hover样式，这里用鼠标移入移出事件
        $(this).css($hovercss);
    }).on('mouseleave',function(){
        $(this).css($btncss);
        if(parseInt(data.active)){
            $box.find('a').eq(data.active-1).css($activecss);   
        }
    });
    if(parseInt(data.active)){//如果用户传入激活按钮表示
        $box.find('a').eq(data.active-1).css($activecss);//结果按钮 
    }

这段代码用来设置导航条的样式

OK，到此为止，这个小’框架‘就制作完成了。
如果你想使用它，可以复制上面的4段JS代码，保存到一个JS文件中，然后在你的html文件中引入jquery和保存的这个JS文件，就可以使用$.fhwdaohang()这个自定义函数了。

$.fhwdaohang({
    boxid:id,//必须传入导航容器的id，以#开头
    length:n,//传入导航按钮的个数，不传默认生成1个
    href:[],//传入每个导航按钮的链接，是一个数组，如果不传默认是#
    aname:[],//传入每个导航按钮的名字，也是一个数组，如果不传默认是’导航X‘
    type:'left',//传入left表示导航是横向排列，如果不传，导航默认纵向排列
    active:n,//传入需要激活按钮的序号，从1开始，不传入不激活按钮
    pos:{},//传入导航容器的位置CSS样式，当然你可以在自己的CSS里写样式，不传入函数中
    btncss:{},//传入导航按钮的CSS样式，不传有默认样式
    hovercss:{},//传入导航按钮的hover样式，不传有默认样式
    activecss:{},//传入导航按钮的激活样式，不传有默认样式
});

这个函数的具体使用方法如上，不想传某个参数可以直接不写属性名，顺序也是可以随便打乱的。